import React from 'react';
import moment from 'moment';
import styles from './Document.less';
import config from '../../../../config/config';
import zhCN from 'antd/es/date-picker/locale/zh_CN';
import {Form, Input, Button, Row, Col, DatePicker, Select} from 'antd';

const FormItem = Form.Item;

const DocumentSearch = (props) => {

  const { themeColor, onSearch, onReset } = props;
  const [form] = Form.useForm();
  const { getFieldsValue, getFieldValue, validateFields, setFieldsValue, resetFields } = form;

  const handleSearch = () => {
    let fields = getFieldsValue();
    const date = getFieldValue("upload_time");
    if (date) {
      fields["upload_time"] = moment(date.$d).format("YYYY-MM-DD");
    }
    onSearch(fields)
  };

  const handleReset = () => {
    resetFields();
    onReset()
  };

  const documentTypeOptions = config.document_types.map(item => {
      const selectOption = new Object();
      selectOption.id = item.key;
      selectOption.value = item.key;
      selectOption.label = item.key;
      return selectOption;
  });

  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16},
  };

  const iconStyle = {
    marginRight: "2px",
  };

  return (
    <div className={styles.singleRowSearch}>
      <Form form={form}>
        <Row className={styles.formRowDiv}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="文档名" name={"document_name"}>
              <Input placeholder="请输入文档名" />
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label='文档类型' name={"document_type"}>
              <Select placeholder="请选择文档类型" options={documentTypeOptions} />
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label='上传时间' name={"upload_time"}>
              <DatePicker locale={zhCN} placeholder="请输入上传时间" style={{ width: "100%"}} />
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem>
              <Button size="default" icon={<i className="ri-search-line" style={iconStyle}></i>} style={{marginLeft: "20px", border: "0px", background: themeColor}} onClick={() => handleSearch()}>查询</Button>
              <Button size="default" icon={<i className="ri-restart-line" style={iconStyle}></i>} style={{marginLeft: "20px"}} onClick={() => handleReset()}>重置</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default DocumentSearch;
